<template>
    <div>
        <div class="recommend-title">
            <span>推荐</span>
        </div>
        <div class="recommend-container">
            <ul class="recommend-list" v-if="recommend.length>0">
                <ShowList v-for="(item,index) in recommend"
                          :key="index"
                          :item=item
                />
            </ul>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    import ShowList from './../../components/ShopList'

    export default {
        name: "Recommend",
        components: {
            ShowList
        },
        computed: {
            ...mapState(['recommend'])
        },
        mounted() {
            this.$store.dispatch('reqRecommendShopList')
        }
    }
</script>

<style scoped lang="stylus">
    .recommend-title
        width 100%
        height 45px
        background-color #fff
        font-size 16px
        display flex
        align-items center
        justify-content center
        position fixed
        top 0
        left 0
        z-index 99
    .recommend-container
        margin-top 45px
        margin-bottom 50px
        width 100%
        background-color #f5f5f5
    .recommend-list
        display flex
        flex-direction row
        flex-wrap wrap
        align-content center

</style>